<!--  -->
<template>
  <div class="discountCoupon">
    <table-query-header>
      <template #item2="{ setLabel }">
        <div :label="setLabel('点击人号码')">
          <a-input v-model:value="queryParam.userPhone"
                   placeholder="" />
        </div>
      </template>
      <template #item3="{ setLabel }">
        <div :label="setLabel('时间段')">
          <a-range-picker :show-time="{ format: 'HH:mm' }"
                          format="YYYY-MM-DD HH:mm"
                          @change="bptjTimeChange"
                          :value="createValue" />
        </div>
      </template>
      <template #item4="{ setLabel }">
        <div :label="setLabel('办理类型')">
          <a-select v-model:value="queryParam.bustype"
                    placeholder="请选择办理类型">
            <a-select-option value=0>预约办理</a-select-option>
            <a-select-option value=1>套餐办理</a-select-option>
          </a-select>
        </div>
      </template>
      <template #buttons>
        <a-button type="primary"
                  @click="subbuslist">查询</a-button>
        <a-button style="margin-left: 8px"
                  @click="reset">重置</a-button>
      </template>
    </table-query-header>
    <a-button type="primary"
              style="margin-bottom: 20px"
              @click="handleExport">导出报表</a-button>

    <a-table :dataSource="dataSource"
             :columns="columns"
             :pagination="pagination"
             rowKey="id"
             @change="tablePaginationChange" />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
import bgUserApi from '@/api/bg_user/index'
import { formatDate } from '@/utils/common'
import dayjs, { Dayjs } from 'dayjs'
import { jsonToSheetXlsx, erportXlsx } from '@/components/Excel'
export default defineComponent({
  components: {
    DynamicTable,
    TableQueryHeader
  },
  setup() {
    onMounted(() => {
      subbuslist()
    })
    const tableRef = ref<any>(null)
    const bptjTimeChange = (date, dateString) => {
      state.createValue = date
      state.queryParam.startT = dateString[0]
      state.queryParam.endT = dateString[1]
    }
    const state = reactive({
      queryParam: {
        // 表格查询参数
        busName: '',
        startT: '',
        endT: '',
        status: '',
        busType: 1,
        busAlias: '',
        userPhone: '',
        bustype: ''
      } as any,
      createValue: [],
      columns: [
        {
          title: '办理类型',
          dataIndex: 'bustype'
        },
        {
          title: '办理套餐',
          dataIndex: 'combo'
        },
        {
          title: '办理人号码',
          dataIndex: 'contactPhone'
        },
        {
          title: '提交时间',
          dataIndex: 'updateTime'
        },
        {
          title: '预约地址',
          dataIndex: 'address'
        },
        {
          title: '产品ID',
          dataIndex: 'productId'
        },
        {
          title: '失败原因',
          dataIndex: 'failreason'
        },
        {
          title: '办理结果',
          dataIndex: 'busresult'
        }
      ],
      tableLoading: false,
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          state.rowSelection.selectedRowKeys = selectedRowKeys
        },
        selectedRowKeys: []
      },
      pagination: {
        current: 1, //分页的索引
        total: 0,
        pageSize: 10, //每页中显示10条数据
        showSizeChanger: false, //不设置每页的数据条数
        size: 'small',
        pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
        showTotal: (total, range) => {
          return '第' + range[0] + '到第' + range[1] + '条' + '  ' + '共' + total + '条'
        } //分页中显示总的数据
      } as any,
      dataSource: []
    })
    function getTableDaTa(params) {
      console.log('%c 🥓 params: ', 'font-size:20px;background-color: #465975;color:#fff;', params)
      const myParams = { ...params, ...state.queryParam }
      console.log(myParams, '查询参数')
      return bgUserApi.queryRecord(myParams)
    }
    const handleExport = () => {
      let req = {
        current: 1,
        limit: 99999999,
        ...state.queryParam
      }
      bgUserApi.checkbuslist(req).then((res: any) => {
        res.data.forEach((item) => {
          item.bustype = item.bustype == 1 ? '立即办理' : '预约办理'
          item.updateTime = formatDate(item.updateTime)
        })
        erportXlsx(state.columns, res.data)
      })
    }
    const reset = () => {
      state.queryParam = {}

      state.pagination = {}
      state.createValue = []
    }
    function handleAdd() {
      console.log(
        '%c 🍪 queryParam.time: ',
        'font-size:20px;background-color: #FFDD4D;color:#fff;',
        state.queryParam.time
      )
    }
    function subbuslist() {
      let req = {
        current: state.pagination.current,
        limit: state.pagination.pageSize,
        startTime: state.queryParam.startT,
        endTime: state.queryParam.endT,
        userPhone: state.queryParam.userPhone,
        bustype: +state.queryParam.bustype
      }
      bgUserApi.checkbuslist(req).then((res: any) => {
        console.log('办理结果', res)
        res.data.forEach((item) => {
          item.updateTime = formatDate(item.updateTime)
          item.bustype = item.bustype == 1 ? '立即办理' : '预约办理'
        })
        state.pagination.total = res.total
        state.dataSource = res.data
      })
    }
    function tablePaginationChange(e) {
      // let queryData = {
      //     current_page:e.current,//当前页数
      //     per_page:e.pageSize//每页显示条数
      // };
      // // 合并原有的筛选条件，这样才能在原有的基础上进行分页
      // Object.assign(queryData,this.queryData)
      // subbuslist(queryData)
      state.pagination.current = e.current
      subbuslist()
    }
    return {
      bptjTimeChange,
      getTableDaTa,
      tableRef,
      handleExport,
      reset,
      subbuslist,
      ...toRefs(state),
      tablePaginationChange
    }
  }
})
</script>
<style lang="scss" scoped>
.ant-calendar-picker {
  // width: 450px !important;
  display: flex;
  justify-content: space-between;
}
</style>
